<template>
    <div class="err403">
        <section class="box clearfix">
            <div class="img-box left">
                <img src="../assets/403.svg" alt="">
            </div>
            <div class="info-box left">
                <h1>403</h1>
                <h3>抱歉，你无权访问此页面</h3>
                <p><a @click="logout" href="javascript:;">返回登录页</a></p>
            </div>
        </section>
    </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    ...mapActions('myadmin/account', ['logout'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    *{
        margin:0;
        padding:0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    html,body{
        width:100%;
    }
    body{
        font-size:16px;
    }
    .box{
        width:850px;
        height:auto;
        margin:200px auto;
    }
    .box .img-box{
        width:400px;
        height:400px;
        margin-right:100px;
    }
    .box .info-box{
        width:350px;
        height:400px;
    }
    .box .img-box img{
        width: 100%;
        height: 100%;
    }
    .box .info-box{
        padding-top:80px;
    }
    .box .info-box h1{
        width:100%;
        text-align:left;
        color: #434e59;
        font-size: 72px;
        font-weight: 600;
        line-height: 72px;
        margin-bottom: 24px;
    }
    .box .info-box h3{
        width:100%;
        text-align:left;
        color: rgba(0,0,0,.45);
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 16px;
    }
    .box .info-box p{
        width:100%;
        text-align:left;
    }
    .box .info-box p a{
        display: inline-block;
        padding:6px 17px;
        background-image: none;
        border: 1px solid #1890ff;
        border-radius: 4px;
        color: #fff;
        background-color: #1890ff;
        border-color: #1890ff;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
        text-decoration: none;
    }
    .box .info-box p a:hover{
        color: #fff;
        background-color: #40a9ff;
        border-color: #40a9ff;
    }


    @media screen and (max-width:800Px) {
        .box{
            width:100%;
            padding:20px;
            margin:0;
        }
        .box .info-box{
            width:100%;
            margin:0 auto;
            padding-top:15px;
        }
        .box .img-box {
            width: 100%;
            margin: 0 auto;
            padding-top:10px;
        }
    }
</style>